
<template>
  <div>
    <!-- <el-form :model="dataForm" label-width="80px"  ref="dataForm"> -->
    <el-form :model="dataForm" :rules="formRules" ref="dataForm" label-width="80px">
         <el-form-item prop="GID" label="可见机构">
                <el-cascader
                  v-model="dataForm.GID"
                  :options="organizeMix"
                  :props="{
                    multiple: false,
                    value: 'GID',
                    label: 'name',
                    children: 'children',
                    checkStrictly: true,
                    emitPath: false,
                    disabled:'disableds'
                  }"
                  :show-all-levels="false"
                  clearable
                >
                </el-cascader>
              </el-form-item>
      <el-form-item label="投票标题" prop="title">
        <el-input v-model="dataForm.title" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="截止时间" prop="stopTime">
        <el-date-picker
              :editable="false"
              v-model="dataForm.stopTime"
              
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择时间"
              clearable
            ></el-date-picker>
      </el-form-item>
      <el-form-item label="投票描述" prop="text">
        <el-input v-model="dataForm.text" auto-complete="off" type="textarea" :rows="4"></el-input>
      </el-form-item>

      <el-form-item label="相关图片" prop="describe" >
        <div class="row">
        <el-image @click="deleteImg(item,index)" v-for="(item,index) in dataForm.imgs" :key="index" :src="getItemPhoto(item)" class="avatar el-upload--picture-card mr20" ></el-image>
        <el-upload
          ref="uploadImg"
          :show-file-list="false"
          action="#"
          list-type="picture-card"
          :http-request="handleUpLoad"
          :on-success="handleSuccess"   
        >  
          <i  class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer cen">
      <el-button @click.native="closedialog">取消</el-button>
      <el-button type="primary" @click.native="submitForm">确认</el-button>
    </div>
  </div>
</template>
<script>
export default {
 
  data() {
    return {
      dataForm: {
        title: "",
        text: "",
        imgs: [],
        GID: [],
      },
    getCommunity:[],
    formRules: {
        title: [{ required: true, message: "标题必填", trigger: "blur" }],
        GID: [{ required: true, message: "小区必选", trigger: "blur" }],
        text: [{ required: true, message: "内容必填", trigger: "blur" }], 
        stopTime: [{ required: true, message: "时间必填", trigger: "blur" }]
      },
    };
  },
  methods: {
    // 关闭
    closedialog() {
      this.$emit("closeEdit");
    },
    
     deleteImg(item,index){
        this.$confirm("确认删除此照片吗？", "提示", {}).then(() => {
           this.dataForm.imgs.splice(index,1)
        })
     },
    // 表单提交
    submitForm() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            params.status =1;
            this.$api.wxNotic.weixin_vote_add({where:params}).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                this.$emit("handleSave");     
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
            });
          });
        }
      });
    },
    async handleUpLoad(param) {
      // 编辑添加图片
      var imgup = "";
      await this.getBase64(param.file).then((res) => {
        imgup = res;
      });
      var paramd = {
        img: imgup,
      };
      this.$api.imgAdd.addimgPer(paramd).then((res) => {
        this.imgURL = res.data;
        this.dataForm.imgs.push(res.id);
      });
    },
      // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    //图片处理
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleSuccess(res, file) {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
   
  },
  async mounted() {
    this.organizeMix = await this.getOrganizeMix();
  },
};
</script>
<style lang="scss" scoped>
  .cen{
      text-align: center;
  }
  .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mr20{
    margin-right: 20px;;
  }
</style>
